<template>
  <div class="error-page min-h-screen flex items-center justify-center px-8 relative z-10">
    <!-- 背景效果 -->
    <div class="fixed inset-0 z-0">
      <Hyperspeed :effectOptions="{
        colors: {
          roadColor: 0x080808,
          islandColor: 0x0a0a0a,
          background: 0x000000,
          shoulderLines: 0xffa500,
          brokenLines: 0xffa500,
          leftCars: [0xffa500, 0xffb84d, 0xffc266],
          rightCars: [0xff8c00, 0xffaa33, 0xffbb66],
          sticks: 0xffa500
        },
        length: 400,
        roadWidth: 10,
        islandWidth: 2,
        fov: 90,
        fovSpeedUp: 150,
        speedUp: 2
      }" />
    </div>

    <!-- 错误内容 -->
    <div class="max-w-2xl mx-auto text-center relative z-10">
      <!-- 错误图标 -->
      <div class="mb-8">
        <div class="text-8xl mb-4">
          <span class="inline-block animate-bounce">⚠️</span>
        </div>
      </div>

      <!-- 标题 -->
      <h1 class="text-4xl font-bold mb-4 text-white">
        出错了
      </h1>

      <!-- 描述 -->
      <p class="text-lg text-gray-400 mb-4 leading-relaxed">
        {{ errorMessage || '抱歉，服务器出现了一些问题。' }}
      </p>

      <p class="text-sm text-gray-500 mb-8">
        错误代码: {{ errorCode || '500' }}
      </p>

      <!-- 按钮组 -->
      <div class="flex items-center justify-center gap-4 flex-wrap">
        <router-link
          to="/"
          class="home-button px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 relative overflow-hidden group"
        >
          <span class="flex items-center gap-2">
            返回首页
            <svg class="w-5 h-5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12a9 9 0 0110.307-8.933 9.888 9.888 0 015.824 15.104M3 12a9 9 0 0118.364 0M3 12a9 9 0 0110.307-8.933m0 0A9.888 9.888 0 0121.131 12m0 0a9.888 9.888 0 01-5.824 15.104m0 0A9 9 0 013 12"></path>
            </svg>
          </span>
        </router-link>

        <button
          @click="goBack"
          class="back-button px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 relative overflow-hidden group"
        >
          返回上一页
        </button>
      </div>

      <!-- 装饰元素 -->
      <div class="mt-16 pt-8 border-t border-white/10">
        <p class="text-gray-500 text-sm">
          如果问题持续存在，请联系我们
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Hyperspeed from '@/vue-bits/Backgrounds/Hyperspeed/Hyperspeed.vue'

interface Props {
  errorCode?: number | string
  errorMessage?: string
}

withDefaults(defineProps<Props>(), {
  errorCode: 500,
  errorMessage: '服务器内部错误'
})

const goBack = () => {
  window.history.back()
}
</script>

<style scoped>
.error-page {
  background: linear-gradient(to bottom right, #050505, #0a0a0a, #0d0d0d);
  position: relative;
}

/* 返回首页按钮 */
.home-button {
  color: #ffffff;
  border: 1.5px solid rgba(255, 165, 0, 0.4);
  background: linear-gradient(135deg, 
    rgba(35, 25, 15, 0.6), 
    rgba(35, 20, 15, 0.4)
  );
  backdrop-filter: blur(12px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 165, 0, 0.2),
    0 0 30px rgba(255, 165, 0, 0.15);
}

.home-button:hover {
  border-color: rgba(255, 165, 0, 0.8);
  transform: translateY(-4px);
  box-shadow: 
    0 16px 48px rgba(255, 165, 0, 0.35),
    inset 0 1px 0 rgba(255, 165, 0, 0.4),
    0 0 50px rgba(255, 165, 0, 0.3);
}

.home-button:active {
  transform: translateY(-2px);
}

/* 返回上一页按钮 */
.back-button {
  color: #cbd5e0;
  border: 1.5px solid rgba(255, 165, 0, 0.2);
  background: rgba(35, 25, 15, 0.3);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.back-button:hover {
  border-color: rgba(255, 165, 0, 0.5);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 165, 0, 0.2);
}

.back-button:active {
  transform: translateY(0);
}
</style>
